<template>
  <div class="map-box">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
import options from "../../assets/js/options.js";
export default {
  name: "",
  mounted() {
    Cesium.Ion.defaultAccessToken =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Zjc2ZTA1MS1lMzU4LTQ0NjAtOTllOS1hOTllMDUyNjljNjciLCJpZCI6NjY4MjcsImlhdCI6MTYzMTQxMTIxNX0.OYWlHf58gHvJSq3Qq99-0Q6F3-51hym6IkJcEuCunoI";
    let viewer = new Cesium.Viewer(
      "cesiumContainer",
      options,
      label,
      city,
      transparentStyle
    );

    //添加地图标注
    let label = viewer.imageryLayers.addImageryProvider(
      new Cesium.WebMapTileServiceImageryProvider({
        url:
          "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg" +
          "&tk=" +
          "19b72f6cde5c8b49cf21ea2bb4c5b21e",
        layer: "tdtAnnoLayer",
        style: "default",
        maximumLevel: 18, //天地图的最大缩放级别
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        show: false,
      })
    );

    //view挂载到windows里
    window.viewer = viewer;
    //定位视角
    viewer.camera.setView({
      destination: new Cesium.Cartesian3(
        1332761.6877998516,
        -4662399.913291841,
        4137888.8927274314
      ),
      orientation: {
        heading: 0.6068261546578739, // east, default value is 0.0 (north)
        pitch: -0.6663290837739155, // default value (looking down)
        roll: 0.0, // default value
      },
    });
    var city = viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(75343),
      })
    );
    var transparentStyle = new Cesium.Cesium3DTileStyle({
      color: "color('white',0.3)",
      show: true,
    });
    city.style = new Cesium.Cesium3DTileStyle({
      color: {
        conditions: [
          ["${Height} >= 100", 'color("purple", 0.5)'],
          ["${Height} >= 50", 'color("red")'],
          ["true", 'color("blue")'],
        ],
      },
      show: "${Height} > 0",
      meta: {
        description: '"Building id ${id} has height ${Height}."',
      },
    });
  },
};
</script> 
<style scoped>
.map-box {
  width: 100%;
  height: 100%;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
